<template>
  <a-row class="card-nopd-out-container department-container">
    <a-col :span="3" class="tree-box process-chart">
      <makeListSide ref="makeListSideRef" @onSelect='onCardSelect' :listUrl="url.list" sideType="route" />
    </a-col>
    <a-col :span=" 21" class="table-box process-chart pt-20 pr-20">
      <div class='blue-line'>{{$t('hangManage.roadVer')}}</div>
<!--      <div class="list-operate2">-->
      <div class="divBackgroundImg2 my-15">
        <a-button type="primary" class="addBtn" :disabled="!selectMakeId" @click="operateRoute('add')">
          <template #icon><PlusSquareOutlined /></template>{{ $t('common.addNew') }}
        </a-button>
      </div>
      <a-table :columns="columns" size="small" :dataSource="moProcRoadmapVersionVO" :pagination="false" :scroll="{y: 'calc(100vh - 320px)'}">
        <template #bodyCell="{ column, text, record}">
          <template v-if="column.key === 'name'">
            <span class="code-link" @click="viewDetail(record)">{{record.name}} </span>
          </template>
          <template v-else-if="column.key === 'status'">
            <a-tag :color="text == 1? 'processing' : 'warning'">{{text == 1 ?$t('other.use'): $t('other.unUse')}}</a-tag>
          </template>
          <template v-else-if="column.key === 'operate'">
            <span class="table-operate-container">
              <a-button type="link" class="primary-link" @click="operateRoute('edit',record)">{{ $t('common.editor') }}</a-button>
              <span>
                <a-divider type="vertical" />
                <a-button type="link" class="primary-link" @click="handleCopy(record.id)">{{ $t('other.copyTo') }}...</a-button>
              </span>
              <span v-if="record.status !=1">
                <a-divider type="vertical" />
                <a-button type="link" class="warning-link" @click="handleDelete(record.id, true)">{{ $t('common.del') }}</a-button>
              </span>
            </span>
          </template>
        </template>
      </a-table>
    </a-col>
    <copyRouteModal ref="copyRouteModal" @ok="otherOperate" />
    <addRouteModal ref="addRouteModalRef" @ok="otherOperate" />
    <editRouteModal ref="editRouteModalRef" @ok="otherOperate" />
    <viewRouteModal ref="viewRouteModalRef" @operateRoute="operateRoute" />
  </a-row>
</template>

<script>
import { PlusSquareOutlined } from '@ant-design/icons-vue'
import { ListMixinPm } from '@/mixin/listMixinPm.js'
import { listInnerColumns } from './newModules/routeChartConfig'
import copyRouteModal from './newModules/copyRouteModal'
import makeListSide from '@/views/makeManage/makeProcess/newModules/makeListSide.vue'
import addRouteModal from './modules/addRouteModal.vue'
import editRouteModal from './modules/editRouteModal.vue'
import viewRouteModal from './modules/viewRouteModal.vue'
import { store } from '@/store'
import { mapState } from 'vuex'
import { cloneDeep } from 'lodash'
export default {
  name: 'clientManage',
  mixins: [ListMixinPm],
  components: { copyRouteModal, makeListSide, addRouteModal, editRouteModal, viewRouteModal, PlusSquareOutlined},
  computed: {
    ...mapState({
      tabs: state => state.setting.tabs
    })
  },
  data () {
    return {
      url: {
        delete: '/api/mo/mo-proc-roadmap/delete',
        list: '/api/mo/mo-proc-roadmap/page'
      },
      columns: listInnerColumns,
      moProcRoadmapVersionVO: [],
      selectMakeId: null
    }
  },
  methods: {
    loadData () { },
    viewDetail (record) {
      this.$refs.viewRouteModalRef.open({ moId: record.moId, routeId: record.id })
    },
    async refreshTab (type) {
      let path = type == 'add' ? '/makeManage/routeChart/add' : type == 'edit' ? '/makeManage/routeChart/edit' : '/makeManage/routeChart/details'
      const tabList = cloneDeep(this.tabs)
      let changeTabs = tabList.filter((i) => ![path].includes(i.path))
      await store.commit('updateState', { tabs: changeTabs })
    },
    async operateRoute (type, record, isViews) {
      type == 'add' ? await this.$refs.addRouteModalRef.open(isViews ? record : { moId: this.selectMakeId })
        : await this.$refs.editRouteModalRef.open(isViews ? record : { moId: record.moId, routeId: record.id })
      this.$refs.viewRouteModalRef && this.$refs.viewRouteModalRef.onCancle()
    },
    otherOperate () {
      this.$refs.makeListSideRef.loadData(true)
    },
    handleCopy (id) {
      this.$refs.copyRouteModal.open(id, true)
    },
    onCardSelect (record) {
      this.moProcRoadmapVersionVO = record.moProcRoadmapVersionVO || []
      this.selectMakeId = record.id
    }
  }
}
</script>
